import React, { PureComponent } from "react";
import {
    getInputChangeAction,
    getAddItemAction,
    getDeleteItemAction,
    getTodoList
} from "../store/actionCreators";
import { connect } from "react-redux";
import TodoListUI from "./TodoListUI";

class AntdTodoList extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleInputChange = e => {
        const action = getInputChangeAction(e.target.value);
        // store.dispatch(action);
    };

    handleStoreChange = () => {
        this.setState();
    };

    handleButtonClick = () => {
        const action = getAddItemAction();
        // store.dispatch(action);
    };

    handleItemDelete = index => {
        const action = getDeleteItemAction(index);
        // store.dispatch(action);
    };

    render() {
        return (
            <TodoListUI
                inputValue={this.props.inputValue}
                list={this.props.list}
                handleInputChange={this.handleInputChange}
                handleStoreChange={this.handleStoreChange}
                handleButtonClick={this.handleButtonClick}
                handleItemDelete={this.handleItemDelete}
            />
        );
    }

    componentDidMount() {
        const action = getTodoList();
        // store.dispatch(action);
    }
}

const mapStateToProps = state => {
    return {
        inputValue: state.inputValue,
        list: state.list
    };
};

const mapDispatchToProps = dispatch => {
    return {
        handleInputChange(e) {
            const action = getInputChangeAction(e.target.value);
            dispatch(action);
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(AntdTodoList);
